<template>
    <div  style="padding: 20px; margin-left: 15px;">
        <h3>角色添加</h3>
        <div style="margin-top: 20px;">
            <el-form
                ref="ruleFormRef"
                :model="ruleForm"
                :rules="rules"
                class="demo-ruleForm"
                :size="formSize"
                status-icon
            >
                <el-form-item label="角色名称" prop="name">
                <el-input v-model="ruleForm.name" />
                </el-form-item>
                <el-form-item style="margin-left: 80px;">
                    <el-button size="small" @click="resetForm(ruleFormRef)">取消</el-button>
                    <el-button type="primary" size="small" @click="submitForm(ruleFormRef)">确定</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script setup lang="ts">
    import { reactive, ref } from 'vue'
    import type { FormInstance, FormRules } from 'element-plus'

    const formSize = ref('default')
    const ruleFormRef = ref<FormInstance>()
    const ruleForm = reactive({
        name: 'Hello',
    })

    const rules = reactive<FormRules>({
        name: [
            { required: true, message: '请输入角色名称', trigger: 'blur' },
        ]
    })

    const submitForm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
        console.log('submit!')
        } else {
        console.log('error submit!', fields)
        }
    })
    }

    const resetForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.resetFields()
    }

    const options = Array.from({ length: 10000 }).map((_, idx) => ({
    value: `${idx + 1}`,
    label: `${idx + 1}`,
    }))
</script>

<style lang="scss" scoped>
    .el-form-item__content{
        margin-left: 100px;
    }
    .el-input{
        width: 250px;
        height: 28px;
    }
    .el-button{
        padding: 7px 15px;
        height: 28px;
    }
</style>